<template>
  <u-header>
    <template #nav>
      <global-nav curr="about" />
    </template>
    <template #default>
      <div class="text-center text-white" style="padding-top: 340px">
        <!-- <div class="logo">
          <img src="../assets/logo.png" alt="logo">
        </div> -->
        <h1 class="font-sans font-semibold text-8xl">福利体系</h1>
        <div class="mt-5 text-3xl">跟上团队赚钱和呼吸一样简单</div>
      </div>
    </template>
  </u-header>
  <div class="main">
    <div class="wrapper">
      <div class="title">
        <h3 class="text-3xl font-bold">企业福利</h3>
        <p class="mt-3 ml-20 text-base leading-5">Corporate Welfare</p>
      </div>
      <div class="grid grid-cols-4 gap-4 mt-10 qyfl">
        <div class="duration-200 rounded item  hover:translate-y-[-10px] hover:duration-200"  v-for="item in benefitList" :key="item.id">
          <div class="icon" :class="[`icon_${item.id}`]"></div>
          <h3 class="my-3 text-base text-center">{{ item.name }}</h3>
          <p class="text-sm leading-6">{{ item.desc }}</p>
        </div>
      </div>
      <div class="line"></div>
      <div class="title">
        <h3 class="text-3xl font-bold">公司环境</h3>
        <p class="mt-3 ml-20 text-base leading-5">Corporate Environment</p>
      </div>
      <div class="mt-10">
        <img src="../assets/env.png" alt="公司环境" />
      </div>
    </div>
  </div>
  <home-footer />
</template>

<script setup>
import { ref, computed } from 'vue'
import UHeader from './UHeader.vue'
import GlobalNav from '@/components/GlobalNav.vue'
import HomeFooter from '@/components/HomeFooter.vue'

const benefitList = ref([
  {
    id: 1,
    name: '顶尖薪酬',
    desc: '你的努力在这里被看见，薪酬水平不仅领跑业界，更以行业内领先的起薪，让你每一步都走在成功的快车道上。千好万好，薪资最好，让你的每一分付出都有超值回报！'
  },
  {
    id: 2,
    name: '落户厦门',
    desc: '符合条件即可轻松落户厦门，让这座美丽的海滨城市成为你温馨的家。我们为你铺就通往梦想的道路，让幸福不再遥远。'
  },
  {
    id: 3,
    name: '硬核的福利保障',
    desc: '五险一金全面覆盖，十三薪稳稳拿捏，月度绩效奖助力成长，工会福利拉满，更有带薪年假法定节假日等丰富假期，让你工作之余也能充分享受生活。快乐工作，快乐生活，我们一直在努力！'
  },
  {
    id: 4,
    name: '暖心的内部关怀',
    desc: '年度体检、周年庆典，员工的每一个重要时刻我们都不曾缺席。行政定期满足式投喂，节庆礼物满满当当，让你的每一天都充满温馨与甜蜜。'
  },
  { id: 5, name: '多彩的活动', desc: '年终尾牙、中秋博饼、活动丰富,节日庆典轮番上阵，在这里，总有伙伴与你一路同行，共享欢乐时光。' },
  { id: 6, name: '装备福利', desc: '人体工学座椅+自动升降桌，让大家都能用好的装备”打怪，装备好才能升级快。' },
  { id: 7, name: '人文主义与企业文化', desc: '我们尊重每一种性格和情绪表达，营造开放热情的办公氛围。让你“玩”得纯粹，“赢”得精彩！' },
  { id: 8, name: '热情的办公氛围', desc: '上班就像开黑，你的伙伴都各有所长，在我们的升级之路上，大家完美配合，一起“玩”得更开心快来加入我们吧！一起在这片充满机遇与挑战的舞台上绽放光芒！' }
])
</script>

<style lang="scss" scoped>
.title {
  color: #1e445d;
  background: no-repeat 4px center url(../assets/icon_title.png);
  padding-left: 60px;
}
.main {
  padding-top: 160px;
  margin-bottom: 0;
  padding-bottom: 40px;
  background:#f6fbff no-repeat center bottom url(../assets/bg_main.jpg);
}

.qyfl {
  .item {
    margin-top: 70px;
    padding: 6px 15px;
    color: #49697d;
    .icon{
      margin:0 auto;
      width:60px;
      height: 60px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      &.icon_1{background-image: url(../assets/icon_1.png);}
      &.icon_2{background-image: url(../assets/icon_2.png);}
      &.icon_3{background-image: url(../assets/icon_3.png);}
      &.icon_4{background-image: url(../assets/icon_4.png);}
      &.icon_5{background-image: url(../assets/icon_5.png);}
      &.icon_6{background-image: url(../assets/icon_6.png);}
      &.icon_7{background-image: url(../assets/icon_7.png);}
      &.icon_8{background-image: url(../assets/icon_8.png);}
    }
  }
}
.line {
  margin: 80px 0;
  background: url(../assets/line.jpg) no-repeat center center;
  background-size: 100% 1px;
  width: 100%;
  height: 1px;
}
</style>
